<template>
	<view class="min100 bg pt-45 pl-30 pr-30">
		<view class="password-head pl-30 pr-30">
			<u-field v-model="from.phone" disabled label="手机号" maxlength="11" type="number" input-align="right"
				placeholder="请输入手机号">
			</u-field>
			<view class="">
				<u-field v-model="from.code" label-width="0" maxlength="6" type="number" placeholder="请填写验证码">
					<u-button size="mini" slot="right" hover-class="none" class='code-btn' @click="getCode">{{codeText}}
					</u-button>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			</view>
			<u-field v-model="from.password" label="新密码" type="password" input-align="right" placeholder="请设置新密码">
			</u-field>
			<u-field v-model="from.password_re" label="确认密码" :border-bottom="false" type="password" input-align="right"
				placeholder="请确认密码">
			</u-field>

		</view>
		<view class="mt-44">
			<u-button class="password-btn size-30 white" hover-class="none" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				from: {
					phone: '',
					code: '',
					password: '',
					password_re:''
				},
				codeText: '获取验证码'
			};
		},
		methods: {
			submit() {
				if (!this.from.phone.match(/^(0|86|17951)?1[3456789]\d{9}$/)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (!this.from.code) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})

				if (!this.from.password) return uni.showToast({
					title: '请设置新密码',
					icon: 'none'
				})
				if (this.from.password != this.from.password_re) return uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				})
				this.$http('api/user/updatePassword', this.from).then(res => {
					uni.showToast({
						title:'修改成功'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},800)
				})
			},
			codeChange(e) {
				this.codeText = e
				console.log(e);
			},
			getCode() {
				if (!this.from.phone.match(/^(0|86|17951)?1[3456789]\d{9}$/)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 1000);
					this.$http('api/login/sendCode', {
						phone: this.from.phone,
						type: 2
					}, 'POST').then(data => {
						uni.showToast({
							title: "发送成功",
							icon: 'none'
						})
						this.$refs.uCode.start();
					}).catch(() => {
						
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			getUserInfo () {
				this.$http('api/user/userInfo').then(res => {
				  this.from.phone = res.phone
				})
			},
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f5f5f5;
	}
	.password-head {
		background: #f5f5f5;
		border-radius: 16rpx;
	}
	/deep/ .u-label-text,/deep/ .uni-input-input {
		color: #282828;
	}
	/deep/ .u-btn--default {
		border: none;
	}
	.password-head-li {
		height: 100rpx;
		border-bottom: 1px solid #EBEBEB;

		&:last-child {
			border-bottom: none;
		}

		input {
			text-align: right;
			color: #fff;
			font-size: 30rpx;
		}

		&:nth-child(2) {
			input {
				text-align: left;
			}
		}

		.code {
			width: 190rpx;
			height: 60rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 60rpx;
			text-align: center;
			background: #303143;
			border-radius: 30rpx;
		}
	}

	.password-btn {
		color: #FFFFFF !important;
		height: 88rpx !important;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 44rpx;
		&::after {
			border: none !important;
		}
	}

	/deep/ .u-field {
		color: #FFFFFF;
		padding: 30rpx 0 !important;
		
		
	}

	.code-btn {
		width: 190rpx;
		line-height: 60rpx !important;
		margin: 0;
		padding: 0;
		height: 60rpx !important;
		color: #FFFFFF !important;
		background: #30314395 !important;
		border-radius: 30rpx;

		&::after {
			border: none !important;
		}
	}
</style>
